Summary 3 - Chapters 2 and 11

Topic 1 – Some basics of CSS rules and how they are used to style HTML. Every HTML element has style properties that can be set with CSS. The properties relate to the different visual aspects of the element, such as its position onscreen, the width of its border, the color, the size, and fonts of its text, etc. CSS is a mechanism for selecting HTML elements and then setting the selected elements’ their CSS properties. </html> - Here you see the use of the HTML style tag. This tag allows you to add CSS styles directly into your document. The browser will apply the CSS styles within the style tag to the HTML elements within the <body> - tag.

Topic 2 – Some style elements of CSS. There are three ways to add CSS to your Web pages – embedded, inline, and linked from a CSS style sheet. Inline style declarations are added to a tag using the HTML style attribute. Ex) <p>This paragraph simply takes on the browser’s default paragraph style. Embedded CSS styles are placed in the head of the HTML document. Ex) <head> other head elements (e.g., meta tags, title) go here - style type=”text/css”> h1 {font-size:16px;} p {color:blue;} Linked styles - When creating your site of more than one page you can place your styles in a separate document – a style sheet. A style sheet is a text file with the .css extension. You can link your style sheet to as many HTML pages as you need with a single line of code in the head tag of each page.

Topic 3 – Many declarations can be contained within a rule in CSS. For instance, type in your CSS - p {color:red; font-size:12px; font-weight:bold;} Now you have made the paragraph text red, 12 pixels high, and bold! Do not forget that each declaration ends with a semicolon to separate it from the next. What’s cool is that multiple selectors can be grouped, h1, h2, and h3 tags to be blue and bold, you could type this - h1 {color:blue; font-weight:bold;} h2 {color:blue; font- weight:bold;h3 {color:blue; font-weight:bold;}.